<template>
    <div class="box">
        <!-- 面包屑导航区 -->
        <t-breadcrumb :maxItemWidth="'150'">
            <t-breadcrumbItem :to="{ path: '/dashboard' }">首页</t-breadcrumbItem>
            <t-breadcrumbItem>商品管理</t-breadcrumbItem>
            <t-breadcrumbItem :maxWidth="'160'">商品列表</t-breadcrumbItem>
        </t-breadcrumb>

        <!-- 卡片视图区域 -->
        <t-card bordered>
            <!-- 搜索与添加区域 -->
            <t-row :gutter="20">
                <t-col :span="5">
                    <div class="search">
                        <t-input v-model="queryInfo.query" clearable @clear="getGoodsList" :onEnter="getGoodsList"
                            placeholder="请输入内容"></t-input>
                        <t-button theme="default" @click="getGoodsList"> 搜索 <search-icon slot="icon" /> </t-button>
                    </div>
                </t-col>
                <t-col :span="2">
                    <t-button @click="goAddPage"> 添加商品</t-button>
                </t-col>
            </t-row>
            <!-- 商品列表区域 -->
            <t-table rowKey="index" :data="goodsList" :columns="columns" stripe bordered hover resizable>
                <!-- 插槽方式 自定义单元格， colKey 的值默认为插槽名称  -->
                <template #add_time="{ row }">
                    {{ row.add_time | dateFormat }}
                </template>

                <!-- 插槽方式 自定义单元格， colKey 的值默认为插槽名称  -->
                <template #operate="{ row }">
                    <t-space>
                        <!-- 编辑按钮 -->
                        <t-button theme="primary" size="small" @click="goEditPage(row.goods_id)"><i
                                class="iconfont icon-bianji"></i></t-button>
                        <!-- 删除按钮 -->
                        <t-button theme="danger" size="small" @click="removeById(row.goods_id)"><i
                                class="iconfont icon-shanchu"></i></t-button>
                    </t-space>
                </template>
            </t-table>

            <!-- 分页 -->
            <t-pagination v-model="queryInfo.pagenum" :total="total" :pageSizeOptions="[5, 10, 15, 20]"
                :page-size.sync="queryInfo.pagesize" @current-change="onCurrentChange"
                @page-size-change="onPageSizeChange" />

        </t-card>


    </div>
</template>

<script>
import { SearchIcon, } from 'tdesign-icons-vue';

export default {

    components: {
        SearchIcon
    },

    created() {
        this.getGoodsList()
    },

    data() {
        return {
            // 获取商品列表的参数对象
            queryInfo: {
                query: '',
                // 当前页数
                pagenum: 1,
                pagesize: 10,
            },
            // 商品列表数据
            goodsList: [],
            columns: [
                { colKey: 'index', title: '#', width: '20' },
                { colKey: 'goods_name', title: '商品名称', width: '100' },
                { colKey: 'goods_price', title: '商品价格(元)', width: '30' },
                { colKey: 'goods_weight', title: '商品重量', width: '30' },
                { colKey: 'add_time', title: '创建时间', width: '35' },
                { colKey: 'operate', title: '操作', width: '30' },
            ],
            // 总数据条数
            total: 0,
        }
    },

    methods: {
        // 根据分页获取对应的商品列表
        async getGoodsList() {
            const { data: res } = await this.$http.get('goods', { params: this.queryInfo })
            if (res.meta.status !== 200) {
                this.$message.error('获取商品列表失败！')
            } else {

                this.goodsList = res.data.goods

                this.goodsList.forEach((item, index) => {
                    item.index = index + 1;
                });

                this.total = res.data.total
            }
        },

        // 每页数量切换时触发
        onPageSizeChange(size, pageInfo) {
            this.queryInfo.pagesize = size
            this.getGoodsList()
        },

        // 页码值切换时触发
        onCurrentChange(current, pageInfo) {
            this.queryInfo.pagenum = current
            this.getGoodsList()
        },

        // 跳转到商品编辑页面
        goEditPage(id) {

            this.$router.push({
                name: 'edit',
                params: { id: id },
            })
        },

        // 根据Id删除对应的商品信息
        removeById(id) {
            // 弹窗询问用户是否删除数据
            const confirmDia = this.$dialog.confirm({
                header: '提示',
                body: '次操作将永久删除该商品，是否继续？',
                confirmBtn: '确定',
                cancelBtn: '取消',
                onConfirm: async ({ e }) => {
                    // console.log('confirm button has been clicked!');
                    // console.log('e: ', e);
                    const { data: res } = await this.$http.delete('goods/' + id)
                    if (res.meta.status !== 200) {
                        this.$message.error('删除商品失败！')
                    } else {
                        this.getGoodsList()
                        this.$message.success('删除商品成功！')
                        // 请求成功后，销毁弹框
                        confirmDia.destroy();
                    }
                },
                onClose: ({ e, trigger }) => {
                    this.$message.info('已取消删除')
                    // console.log('e: ', e);
                    // console.log('trigger: ', trigger);
                    confirmDia.hide();
                },
            })
        },

        // 跳转到添加商品页面
        goAddPage() {
            this.$router.push('/goods/add')
        },

    },

}
</script>

<style lang="less" scoped>
.box {
    padding: 15px;

    .search {
        display: flex;
        justify-content: center;
    }
}
</style>